{{template Elements/header_content}}
<style>
body{background:#3b3331;}
.coupon-info{width:180px;display:inline-block;background:#FFF;color:#bb9451;height:30px;border-radius:15px;font-size:14px;padding:0 !important;border:0 none;line-height:30px;}
.btn-primary{background:#bb9451;color:#FFF;font-weight: bold;border:0 none;border-radius:15px;height:30px;line-height:30px;padding:0 30px;}
.btn-primary:hover,.btn-primary:focus{background:#bb9451;color:#FFF;}
.promotion-title{background:url('http://ozlife.oss-cn-hongkong.aliyuncs.com/files/crown/title.png');height:30px;background-repeat:no-repeat;color:#FFF;font-size:13px;background-position:center center;line-height:26px;margin:0 30px;}
.promotion-content{color:#bb9451;font-size:12px;padding:5px;margin-top:25px;}
.promotion-content p {margin:0 0;}
.promotion-content img {margin-bottom:5px;}
.promotion-content p {line-height:25px;}
.promotion-explain{color:#726461;font-size:12px;padding:20px;}
.lang-menu{border:1px solid #bb9451;padding:0 0;color:#726461;height:20px;float:right;margin:15px 15px 0 0;}
.lang-menu a{color:#bb9451;display:inline-block;float:left;line-height:20px;font-size:12px;padding:0 5px;}
.lang-menu a.active{color:#FFF;background:#bb9451;}
</style>

<img style="position:absolute;top:50px;left:20px;" src="http://ozlife.oss-cn-hongkong.aliyuncs.com/files/crown/Perth-Atrium.png">

    <div>
    	<div style="background-image:url('http://ozlife.oss-cn-hongkong.aliyuncs.com/files/crown/bg2.jpg');padding:5px;background-repeat:no-repeat;">
      		<div class="text-center" style="border:2px solid #bb9451;padding-bottom:30px;">
      			<div class="clearfix">
      				<div class="lang-menu"  role="menu">{{if defined('APPEND_LOCALE_BASE')}}<a href="/wx_promotions/view/{{$WxPromotion['WxPromotion']['id']}}">Eng</a><a class="active" href="#">中</a>
			          	{{else}}<a  class="active" href="#">Eng</a><a href="/zh-cn/wx_promotions/view/{{$WxPromotion['WxPromotion']['id']}}">中</a>
						{{/if}}
					</div>
      			</div>
      			
				<h1 style="font-size:34px;text-align:center;margin:30px 30px;color:#bb9451;line-height:40px;font-weight: bold;">{{$WxPromotion['WxPromotion']['name']}}</h1>
				<p style="color:#FFF;font-size:16px;"> - {{__('Limited Time')}} -</p>
				<p style="color:#bb9451;font-size:12px;line-height:24px;">{{nl2br($WxPromotion['WxPromotion']['summary'])}}</p>
				
				<div class="alert alert-info coupon-info text-center hidden"></div>
				
				<p><a id="btn-share" class="btn btn-primary hidden" href="javascript:void(0)">{{__('Share')}}</a></p>
				<p><a id="btn-coupon" class="btn btn-primary" href="javascript:void(0)" onclick="getCoupon('{{$WxPromotion['WxPromotion']['id']}}')">{{__('Claim')}}</a></p>
				
			</div>
			
			<div class="promotion-content">{{$WxPromotion['WxPromotion']['content']}}</div>
			<div class="text-center">
				<div class="alert alert-info coupon-info text-center hidden"></div>
			
				<div><a id="btn-redeem" style="width:180px;" class="btn btn-primary text-center" href="javascript:void(0)" >{{__('Redeem')}}</a></div>
			</div>
			<hr style="border-color:#675a57;margin:20px 15px 0;">
			<div class="promotion-explain text-center">
				<p>{{nl2br($WxPromotion['WxPromotion']['explain'])}}</p>
				<br/>
				<p style="font-size:12px">{{__('Pageview')}} : {{$WxPromotion['WxPromotion']['view_nums']}}</p>
			</div>
		</div>
	</div>
<div id="share-modal" style="display:none;z-index:10px;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);overflow:hidden;">
	{{if defined('APPEND_LOCALE_BASE')}}
		<img src="http://ozlife.oss-cn-hongkong.aliyuncs.com/files/crown/share-cn.png" style="width:100%;"/>
	{{else}}
		<img src="http://ozlife.oss-cn-hongkong.aliyuncs.com/files/crown/share-en.png" style="width:100%;"/>
	{{/if}}
</div>
<script>

function getCoupon(id){
	$.ajax({
		async:true, 
		type:'get',
		url: BASEURL+"/wx_coupons/getCoupon/"+id,
		success: function (request){
			if(request.ret == 0){
				var coupon = request.coupon_code;
				$.cookie('coupon_{{$WxPromotion['WxPromotion']['id']}}',coupon,{path:'/'});
				$('#btn-coupon').hide();
				$('#btn-share').removeClass('hidden');
				$('.coupon-info').html(coupon);
				$('.coupon-info').removeClass('hidden');
				$('.coupon-info').removeClass('alert-warning').addClass('alert-info').css('text-decoration','none');
				//$('#btn-redeem').addClass('hidden');
				$('#btn-redeem').removeClass('hidden');
			}
		},
		dataType:"json"
	});
	return false;
}

$(function(){
	var coupon = $.cookie('coupon_{{$WxPromotion['WxPromotion']['id']}}');
	if(coupon && coupon != 'null'){
		$('#btn-coupon').hide();
		$('#btn-share').removeClass('hidden');
		$('.coupon-info').html(coupon);
		$('.coupon-info').removeClass('hidden');
		$('#btn-redeem').removeClass('hidden');
	}
	
	$('#btn-share').click(function(){
		$('#share-modal').fadeIn();
	})
	$('#share-modal').click(function(){
		$('#share-modal').fadeOut();
	})
	
	$('#btn-redeem').click(function(){
		var coupon = $.cookie('coupon_{{$WxPromotion['WxPromotion']['id']}}');
		if(!coupon || coupon == 'null'){
			alert('Please claim at first.');
			return false;
		}
		if(!confirm('Staff use only, are you sure to redeem?')){
			return false;
		}
		$.ajax({
			async:true, 
			type:'get',
			url: BASEURL+"/wx_coupons/redeem/{{$WxPromotion['WxPromotion']['id']}}/"+coupon,
			success: function (request){
					if(request.ret == 0){
						$.cookie('coupon_{{$WxPromotion['WxPromotion']['id']}}',null);
						$('#btn-coupon').html('Reclaim').show();
						$('#btn-redeem').addClass('hidden');
						$('.coupon-info').removeClass('alert-info').addClass('alert-warning').css('text-decoration','line-through');
					}
			},
			dataType:"json"
		});
		return false;
	});
})
</script>
